<template>
    <div class="CAReviews">
      <el-container>
      <el-main>
          <el-table :data="tableData" border fit stripe highlight-current-row style="width: 100%;">
            <el-table-column label="歌曲" align="center" min-width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.musicName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="评论数量" align="center" width="300">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.num }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCount } from '@/api/SInformation'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
   data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        dialogFormVisibleImport: false,
        form: {
          musicName: '',
          singer: '',
        },
        formLabelWidth: '120px',
        flag: true,
        id: "",
      }
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
      deleteCommit(row).then(res => {
        this.GetList(this.id);
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      })
    },
    GetList() {
      getCount().then(res => {
        console.log(res);
        this.tableData = res.result;
      })
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.GetList();
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
